<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调配客户接收页</title>
<link href="${rc.contextPath}/assets/css/bootstrap.min.css"
	rel="stylesheet" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/font-awesome.min.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/daterangepicker.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ui.jqgrid.css" />

<link rel="stylesheet"
	href="${rc.contextPath}/assets/css/jquery-ui-1.10.3.full.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" />
<link href="${rc.contextPath}/common/css/common/commonnew.css"rel="stylesheet" type="text/css" />
<!-- ace settings handler -->
<script src='${rc.contextPath}/assets/js/jquery-2.0.3.min.js'></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->

<script src="${rc.contextPath}/assets/js/jquery-ui-1.10.3.full.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${rc.contextPath}/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
<!-- ace scripts -->
<script
	src="${rc.contextPath}/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/common/js/common.js"></script>
<!--<script src="${rc.contextPath}/common/js/thickbox/thickbox.js"></script>
<script src="${rc.contextPath}/common/js/config.js"></script> --><!-- 
<script
	src="${rc.contextPath}/common/js/market/customer/customer_details.js"></script> -->


<script src="${rc.contextPath}/assets/js/flot/jquery.flot.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="${rc.contextPath}/assets/js/flot/jquery.flot.resize.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
<script
	src="${rc.contextPath}/assets/js/date-time/daterangepicker.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.validate.min.js"></script>
<script src="${rc.contextPath}/assets/js/date-time/moment.min.js"></script>


<script src="${rc.contextPath}/assets/js/jquery.bootstrap-duallistbox.js"></script>
<link href="${rc.contextPath}/assets/js/bootstrap-duallistbox.css"rel="stylesheet" type="text/css" />

<script src="${rc.contextPath}/common/js/market/service/receive_list.js" ></script>
</head>

<body>
	<div class="main-container">
		<div class="page-content">

			<div class="page-header">
				当前位置 <i class="icon-double-angle-right"></i> 客户管理 <small> <i
					class="icon-double-angle-right"></i> 调配接收
				</small>
				<p style="float: right">姓名： $!{currentUser.ename}</p>
			</div>

			<form class="form-horizontal" id="validation-form" method="post"
				action="${rc.contextPath}/allot/findAllotRecord"
				>
				<div class="form-group">
					<label class="control-label col-sm-4 " for="agentCode">会员号:</label>
					<div class="col-sm-2">
						<div class="clearfix">
							<input type="text" name="cusId" id="agentCode"
								class="form-control input-sm"  />
						</div>
					</div>

					<div class="col-sm-offset-5">
					<button type="button" class="btn btn-danger btn-sm" id="queryButton">过滤</button>
					</div>
				</div>

				
			</form>
			<div id="dialog" class="hide"></div>
			<hr />
			<table id="grid-table"></table>

			<div id="grid-pager"></div>
			
			<div class="col-sm-offset-5">
					<button type="button" class="btn btn-danger" id="agreeBtn" data-toggle="modal" data-target="#receivePerson" onclick="setReceivePerson()">同意</button>
					&nbsp;&nbsp;
					<button type="reset" id="disAgreeBtn" class="btn btn-inverse" data-toggle="modal" data-target="#receivePerson" onclick="setReceivePerson()">拒绝</button>
			</div>
				
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="receivePerson" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content" style="padding:5px">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel" style="text-align: center;">选择接收人员</h4>
			            </div>
				          <form id="demoform"  action="${rc.contextPath}/allot/receiveAllot" method="post">
				            <select id="receivedPersonlist" multiple="multiple" size="10" name="receivedPersonlist" >
				              <option value="--">请选择</option>
				            </select>
				            <input type="hidden" id="selectedIds" name="selectedIds"/>
				            <input type="hidden" id="approvalState" name="approvalState"/>
				            <div style="padding-top:6px">
				            <button type="submit" class="btn btn-danger form-control">确认</button>
				            </div>
				          </form>		            
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>	
	
		
		</div>
	</div>
	<script type="text/javascript">
		try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
		
		var demo1 = $('select[name="receivedPersonlist"]').bootstrapDualListbox();//初始化双向选择列表
        $("#demoform").submit(function() {
          alert($('[name="receivedPersonlist"]').val());
          
          var selectedIds = $("#grid-table").jqGrid("getGridParam", "selarrrow");
		  var rowData = [];
		  var company;
		  //检查是否有数据被选中
		  if(!selectedIds.toString()){
		 	 alert("请选择至少一条数据");
		 	 return false; 
		 }
		 //获取选中会员编号
		 selectedIds.forEach(function(id){  
		 	 var tempRow = $(grid_selector).jqGrid('getRowData',id);
		 	 rowData.push(tempRow.id);
		 }) 
         $("#selectedIds").val(rowData);
		 console.log($("#selectedIds").val());
        });
        
        
	</script>
	<script type="text/javascript">
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		var column = '["会员号","联系人","手机号","原所属人","调配原因","申请人","申请时间","调配申请表主键id"]';
		var columnCode = [{"name":"cusId","width":60,"index":"cusId"}, 
		                  {"name":"cname","width":60}, 
		                  {"name":"phone","width":80}, 
		                  {"name":"fromEmpName","width":50}, 
		                  {"name":"mixCause","width":120},
		                  {"name":"applyerId","width":50},
		                  {"name":"updateTime","width":70},
		                  {"name":"id","hidden":true,"key":true} ];
		var url = "${rc.contextPath}/allot/findAllotList";
		column = jQuery.parseJSON(column);
		postData = jQuery.parseJSON('{"cusId":"hy110"}');
		
		//过滤查询事件
		$("#queryButton").click(function() {
			var agentCode=$("#agentCode").val();
			var company=$("#company").val();
			var operateTime=$("#id-date-range-picker-1").val();
            $(grid_selector).jqGrid('setGridParam',{
            	postData:{"cusId":agentCode,"fromDid":company,"updateTime":operateTime},
            	page:0,
            	rows:20
        	}).trigger('reloadGrid'); 
		});
		//同意接收弹出框agreeBtn
		$("#agreeBtn").click(function() {
			$("#approvalState").val(1);
		});
		$("#disAgreeBtn").click(function() {
			$("#approvalState").val(3);
		});
		
		
	
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
				'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
				'ui-icon-seek-next' : 'icon-angle-right bigger-140',
				'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
		
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
		
		function makegrid(){
			jQuery(grid_selector).jqGrid({
				url : url,
				mtype : "POST",
				contentType : "application/json",
				datatype : "json",
				height: 350,
				autowidth:true,
				colNames:column,
				colModel:columnCode,
				viewrecords : true,
				rowList:[10,30,50],
				pager : pager_selector,
				emptyrecords: "没有查到相关数据！", 
				pgtext : "第{0}页，总共{1}页", 
				recordtext : "查看 {0} - {1}条记录， 总记录数 {2}",
				loadtext:"加载中，请稍候...",
				altRows: true,
				multiselect : true,
				autowidth:true,
				shrinkToFit: true,
				scrollrows: false,
				jsonReader : {
				      root:"records",
				      page: "pageNow", //当前页
				      total: "pageCount", //总页数
				      records: "rowCount"//总记录数
				},
				 loadComplete : function() {
					var table = this;
					var re_records = $(grid_selector).getGridParam('records');
					if(re_records == 0 || re_records == null){
						$(grid_selector).setGridHeight(0);
					} if(re_records < 10){
						$(grid_selector).setGridHeight(re_records*35);
					} 
					else {
						$(grid_selector).setGridHeight(350);
					}
					$("#id").setGridWidth($(window).width()*0.98);　
					setTimeout(function(){
						updatePagerIcons(table);
					}, 0);
				},
				
	            
	            

			});
		}
		
		makegrid();
		 
	</script>
</body>
</html>
